<template>
    <view class="content">
        <view class="wrapper" v-if="identity == 4">
            
            
            <u-sticky>
                
                <view class="search" @click="showTime = true">
                    <view class="search-cont">
                        <u-icon name="search"></u-icon><text class="u-padding-left-10">{{keyword||"请选择日期"}}</text> 
                    </view>
                </view>
                
                <!-- -->
            </u-sticky>
                    
            <view class="u-padding-20">
                <view class="box3" v-for="(item, index) in list" :key="index">
                    <view class="title">司机信息</view>
                    <view class="item2">
                        <view class="left">姓名</view>
                        <view class="right">{{item.name}}</view>
                    </view>
                    <view class="item2">
                        <view class="left">联系方式</view>
                        <view class="right">{{item.phone}}</view>
                    </view>
                    <view class="title u-p-t-15">车辆信息</view>
                    <view class="item2">
                        <view class="left">类型</view>
                        <view class="right">{{item.vehicle}}</view>
                    </view>
                    <view class="item2">
                        <view class="left">车号</view>
                        <view class="right">{{item.number}}</view>
                    </view>
                    <view class="item2">
                        <view class="left">车长</view>
                        <view class="right">{{item.length}}</view>
                    </view>
                    <view class="item2">
                        <view class="left">载重</view>
                        <view class="right">{{item.load}}</view>
                    </view>
                    
                    <view class="btns2">
                        
                        <view class="btn5" v-if="item.status==3||item.status==1">待装车</view>
                        
                		<view class="btn5" v-else>{{item.status==5?'运输中':item.status==6?'已到达':item.status==7?'已完成':''}}</view>
                        
                        <view class="btn1" v-if="item.status==3||item.status==1" @click.stop="load(item)">装车</view>
                        
                    </view>
                </view>
            </view>
            
            <view v-if="list.length==0">
                <u-loadmore status="nomore" />
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
        
        <u-calendar v-model="showTime" @change="calendarConfirm" max-date="2024-12-30"></u-calendar>
        
        
    </view>
</template>



<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
                identity: '',//4发货 5卸货
                showTime:false,
                keyword:'',//搜索日期
                list:[],
                page:1,
                status: 'loadmore', //加载前值
                limit:10,
                
                
            };
        },
        onLoad() {
            
        },
        onShow() {
            // 身份
            // if (!this.$getSync('identity')) {
            //     this.$setSync('identity', 4)
            //     this.identity = 4;
            //     this.tabbarInfo();
            // } else {
            //     this.identity = this.$getSync('identity');
            //     this.tabbarInfo();
            // }
            
            // 身份
            if(!this.$getTokens()){
                this.$gTo('/pages/login/login');
            }else{
                this.identity = this.$getSync('identity');
                this.tabbarInfo();
                
            }
            
            
            
            
            this.list = [];
            this.page = 1;
            this.status = 'loadmore'; //加载前值
            this.limit = 10;
            
            this.vehicle_list()
        },
        
        onReachBottom() {
            this.page++
            this.vehicle_list()
        },
        
        methods: {
            
            load(item) {
                // this.$gTo(`/pages/loading/bus`)
                this.$gTo(`/pages/loading/ld-2?id=${item.id}`)
            },
            
            toPage(url) {
                this.$gTo(url)
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            //获取车辆列表
            vehicle_list(){
                
                if (this.status == 'nomore') return;
                this.status == 'loading';
                
                this.$ajax('vehicle_list', {
                    user_token:this.$getTokens(),
                    date:this.keyword,
                    page:this.page,
                    limit:this.limit,
                    
                }).then(ret => {
                	if (ret.success == 1000) {
                        if(ret.detail){
                            if (ret.detail.data.length > 0) {
                                this.list = this.list.concat(ret.detail.data);
                                this.page++;
                                this.status = 'loadmore';
                            } else {
                                this.status = 'nomore';
                            }
                            
                            
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            
            calendarConfirm(e){
                console.log(e);
                this.keyword = e.result;
                this.list = [];
                this.page = 1;
                this.status = 'loadmore'; //加载前值
                this.limit = 10;
                this.vehicle_list()
            },
            tabbarInfo(){
                // 发货
                if (this.$getSync('identity') == 4) {
                    if(this.$getSync('authority_car') == 1){
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_03.png",
                                selectedIconPath: "/static/icon/tab_04.png",
                                text: '找车',
                                pagePath: "/pages/tabbar/tab-2"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }else{
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }
                    
                }
                // 卸货
                if(this.$getSync('identity') == 5){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_11.png",
                            selectedIconPath: "/static/icon/tab_12.png",
                            text: '扫码卸车',
                            pagePath: "/pages/tabbar/tab-2"
                        },{
                            iconPath: "/static/icon/tab_09.png",
                            selectedIconPath: "/static/icon/tab_10.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .box{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 40rpx 30rpx 30rpx;
        margin: 16rpx 20rpx 0;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .i-left{
        width: 185rpx;
        color: #656565;
    }
    .i-right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .o-sta1{
        font-size: 24rpx;
        color: #ff602c;
        padding: 7rpx 15rpx;
        background-color: #fff1ec;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .o-sta2{
        font-size: 24rpx;
        color: #0075ff;
        padding: 7rpx 15rpx;
        background-color: #ebf4fe;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .img{
        width: 240rpx;
        height: 170rpx;
    }
    
    
    page{
        background-color: #eef1f6;
    }
    .wrapper{
        // padding: 20rpx;
    }
    .box3{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 40rpx 30rpx 30rpx;
        margin-bottom: 15rpx;
    }
    .item2{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 15rpx;
    }
    .left{
        width: 140rpx;
        color: #656565;
    }
    .right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .btns2{
        padding-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
    }
    .btn1{
        padding: 15rpx 50rpx;
        background-color: #004580;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn5{
		color: #ff5f2b;
        // padding: 15rpx 25rpx;
        // background-color: #ff5f2b;
        // border-radius: 50rpx;
        // margin-left: 20rpx;
    }
    .search{
        background: #eef1f6;
        padding:20rpx 20rpx 0;
        color: #7e7e7e;
    }
    .search-cont{
        background: #fff;
        padding: 20rpx;
        border-radius: 40rpx;
    }
    

</style>
